<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { ElDatePicker } from 'element-plus'

  const props = defineProps({
    startDatePlaceholder: {
      type: String,
      default: () => '开始日期',
    },
    endDatePlaceholder: {
      type: String,
      default: () => '结束日期',
    },
    startDatePickerWidth: {
      type: String,
      default: () => '120px',
    },
    endDatePickerWidth: {
      type: String,
      default: () => '120px',
    },
    startDateDefaultVal: {
      type: String,
      default: () => '',
    },
    endDateDefaultVal: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (
      e: 'change',
      value: { startDate: string; endDate: string; isStartDateGreaterThanEndDate: boolean },
    ): void
  }>()

  // 开始日期
  const startDate = ref(null)

  // 结束日期
  const endDate = ref(null)

  // 验证开始时间是否大于结束时间
  const dateCheck = (startTime: number, endTime: number) => {
    return startTime > endTime
  }

  // 将日期转换为时间戳
  const stringDateToTimestamp = (date: string) => {
    return new Date(date).getTime()
  }

  // 日期更新事件
  const dateChange = () => {
    const startTime = stringDateToTimestamp(startDate.value)
    const endTime = stringDateToTimestamp(endDate.value)
    if (startTime && endTime) {
      if (dateCheck(startTime, endTime)) {
        emits('change', { startDate: null, endDate: null, isStartDateGreaterThanEndDate: true })
      } else {
        emits('change', {
          startDate: startDate.value,
          endDate: endDate.value,
          isStartDateGreaterThanEndDate: false,
        })
      }
    }

    // 清空日期
    if (!startDate.value && !endDate.value) {
      emits('change', { startDate: null, endDate: null, isStartDateGreaterThanEndDate: false })
    }
  }

  // 清空日期
  const resetDateRange = () => {
    startDate.value = null
    endDate.value = null
  }

  watch(
    props,
    (val) => {
      startDate.value = val.startDateDefaultVal
      endDate.value = val.endDateDefaultVal
    },
    { immediate: true },
  )

  defineExpose({
    resetDateRange,
  })
</script>

<template>
  <div>
    <div class="date-range">
      <!-- 开始日期 -->
      <el-date-picker
        id="start-date"
        v-model="startDate"
        type="date"
        :placeholder="props.startDatePlaceholder"
        value-format="YYYY-MM-DD"
        clearable
        :style="{ width: props.startDatePickerWidth, height: '28px' }"
        @change="dateChange"
      />
      <span style="display: flex; align-items: center">~</span>
      <!-- 结束日期 -->
      <el-date-picker
        v-model="endDate"
        type="date"
        :placeholder="props.endDatePlaceholder"
        value-format="YYYY-MM-DD"
        clearable
        :style="{ width: props.endDatePickerWidth, height: '28px' }"
        @change="dateChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .date-range {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  :deep(.el-input__wrapper) {
    height: 26px !important;
  }
</style>
